<template>
    <div class="box">
      <RouteTitle/>
      <div class="content">
        <div class="explain">
          <!-- <div>说明：</div>
          <div>每推荐1位好友，可立即获得5次对话次数</div>
          <div style="display: flex; justify-content: space-between">
            成为会员后，邀请好友成为会员，您将获得30%的佣金抽成。
          </div> -->
          <a-button type="primary" @click="genShareLink" :loading="copyLoading"
            >复制邀请链接</a-button
          >
        </div>
        <a-table
          class="tab-list"
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ x: 150 }"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="uid"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'nickname'">
              <a-row v-if="record.user" align="middle" :gutter="[16, 16]">
                <a-col> <a-avatar :src="record.user.avatar" /></a-col>
                <a-col>{{ record.user.nickname }}</a-col>
              </a-row>
            </template>
            <template v-if="column.key === 'openid'">
              {{ record.openid }}
            </template>
            <template v-if="column.key === 'created_at'">
              {{ convertTimeToTimezone(record.created_at) }}
            </template>

            <template v-if="column.key === 'phone'">
              {{ record.user.phone_txt }}
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </template>

  <script>
  import {
    defineComponent,
    reactive,
    toRefs,
    computed,
    inject,
  } from "vue";
  import {
    SearchOutlined,
    CheckOutlined,
    LineOutlined,
    PlusOutlined,
  } from "@ant-design/icons-vue";
  import { useRoute, useRouter } from "vue-router";
  import request from "@/common/utils/request";
  import utils from "@/common/utils/utils";
  import defaultSetting from "@/common/utils/defaultSetting";
  import { useClipboard } from '@vueuse/core'
  import { notification, Modal } from "ant-design-vue";

  export default defineComponent({
    name: "MediaInviteUser",
    components: {
      SearchOutlined,
      CheckOutlined,
      LineOutlined,
      PlusOutlined,
    },
    setup() {
      const { convertTimeToTimezone } = inject('timezone');
      // 路由
      const route = useRoute();
      const router = useRouter();

      const { text, copy, isSupported } = useClipboard()

      const state = reactive({
        dataSource: [],
        columns: [
          {
            title: "已邀请用户",
            dataIndex: "nickname",
            key: "nickname",
          },
          {
            title: "手机号码",
            dataIndex: "phone",
            key: "phone",
          },
          {
            title: "openid",
            dataIndex: "openid",
          },
          {
            title: "创建时间",
            dataIndex: "created_at",
            key: "created_at",
          },
        ],
        page: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        copyLoading: false,
      });

      const pagination = computed(() => ({
        total: state.total,
        current: state.page,
        pageSize: state.pageSize,
        showSizeChanger: true,
      }));

      const genShareLink = () => {
        state.copyLoading = true;

        request
          .post("/work_ai", "/api/user/invite/code")
          .then((res) => {
            if (res.result && res.result.url) {
                let path = router.resolve({
                    path: defaultSetting.pages.home,
                    query: {
                        org_id: utils.getOrgId(),
                        invite: res.result.code
                    }
                }).href
                let url =  utils.isEnv()?`http://localhost:${location.port}${path}`:defaultSetting.requestDomain + path
                let link = `注册即送免费试用机会，戳链接开始使用：${url}`;

                state.copyLoading = false;

                if(isSupported){
                  copy(link);
                  notification.success({ message: "复制成功！", duration: 1 });
                } else {
                  Modal.warning({
                    title: "提示：复制失败，请手动复制",
                    content: link,
                  })
                }
            }
          })
          .catch((err) => {
            state.copyLoading = false;
          });
      };

      const getSpreadList = () => {
        let params = {
          page: state.page,
          pageSize: state.pageSize,
        };
        state.loading = true;
        request.get("/work_ai", "/user/spread/list", params).then((res) => {
          state.dataSource = res.list;
          state.loading = false;
          state.total = res.total;
        });
      };
      getSpreadList();
      const handleTableChange = (pager) => {
        state.page = pager.current;
        state.pageSize = pager.pageSize;
        getSpreadList();
      };
      return {
        ...toRefs(state),
        genShareLink,
        pagination,
        handleTableChange,
        getSpreadList,
        convertTimeToTimezone,
      };
    },
  });
  </script>

  <style lang="less" scoped>
  .box {
    .content {
      margin-top: 20px;
      border-radius: 16px;
      background: #fff;
      padding: 24px;
      .explain {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
      }
    }
  }
  </style>
